$css3_loading_colors:
  hsla(337, 84, 48, 0.75)
  hsla(160, 50, 48, 0.75)
  hsla(190, 61, 65, 0.75)
  hsla( 41, 82, 52, 0.75);
$css3_loading_size: 2.5em;
$css3_loading_thickness: 0.5em;

// Calculated variables.
$css3_loading_lat: ($css3_loading_size - $css3_loading_thickness) / 2;
$css3_loading_offset: $css3_loading_lat - $css3_loading_thickness;

.css3-loading {
  position: relative;
  width: $css3_loading_size;
  height: $css3_loading_size;
  transform: rotate(165deg);
}
.css3-loading:before,.css3-loading:after {
	content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: $css3_loading_thickness;
  height: $css3_loading_thickness;
  border-radius: $css3_loading_thickness / 2;
  transform: translate(-50%, -50%);
}
.css3-loading:before {
	animation: css3_loading_before 2s infinite;
}
.css3-loading:after {
	animation: css3_loading_after 2s infinite;
}

@keyframes css3_loading_before {
  0% {
    width: $css3_loading_thickness;
    box-shadow:
      $css3_loading_lat (-$css3_loading_offset) nth($css3_loading_colors, 1),
      (-$css3_loading_lat) $css3_loading_offset nth($css3_loading_colors, 3);
  }
  35% {
    width: $css3_loading_size;
    box-shadow:
      0 (-$css3_loading_offset) nth($css3_loading_colors, 1),
      0   $css3_loading_offset  nth($css3_loading_colors, 3);
  }
  70% {
    width: $css3_loading_thickness;
    box-shadow:
      (-$css3_loading_lat) (-$css3_loading_offset) nth($css3_loading_colors, 1),
      $css3_loading_lat $css3_loading_offset nth($css3_loading_colors, 3);
  }
  100% {
    box-shadow:
      $css3_loading_lat (-$css3_loading_offset) nth($css3_loading_colors, 1),
      (-$css3_loading_lat) $css3_loading_offset nth($css3_loading_colors, 3);
  }
}

@keyframes css3_loading_after {
  0% {
    height: $css3_loading_thickness;
    box-shadow:
      $css3_loading_offset $css3_loading_lat nth($css3_loading_colors, 2),
      (-$css3_loading_offset) (-$css3_loading_lat) nth($css3_loading_colors, 4);
  }
  35% {
    height: $css3_loading_size;
    box-shadow:
        $css3_loading_offset  0 nth($css3_loading_colors, 2),
      (-$css3_loading_offset) 0 nth($css3_loading_colors, 4);
  }
  70% {
    height: $css3_loading_thickness;
    box-shadow:
      $css3_loading_offset (-$css3_loading_lat) nth($css3_loading_colors, 2),
      (-$css3_loading_offset) $css3_loading_lat nth($css3_loading_colors, 4);
  }
  100% {
    box-shadow:
      $css3_loading_offset $css3_loading_lat nth($css3_loading_colors, 2),
      (-$css3_loading_offset) (-$css3_loading_lat) nth($css3_loading_colors, 4);
  }
}

.css3-loading {
  position: absolute;
  top: calc(50% - #{$css3_loading_size / 2});
  left: calc(50% - #{$css3_loading_size / 2});
}
